html,
body {
    padding: 10px 10%;
}

input[type="text"] {
    padding      : 6px 8px;
    min-width    : 100px;
    border       : 1px solid #333;
    border-radius: 3px;
    box-shadow   : 0 0 1px steelblue inset;
    transition   : all .3s;
}

input[type="text"]:focus {
    border-color: steelblue;
    box-shadow  : 0 0 2px steelblue inset, 0 0 8px steelblue;
    outline     : 0;
}
input[type="radio"]:checked + label {
    color: #0028c4;
}
button {
    padding: 6px 8px;
    background-image: linear-gradient(to bottom,#f9f8f7,#e5e5e5);
    border-radius: 3px;
    border:1px solid #333;
    cursor: pointer;
    outline: 0;
}
button:active {
    background-image: linear-gradient(to bottom,#e5e5e5,#f9f8f7);
}
.palette {
    display: flex;
    height: 100px;
    list-style-type: none;
}
.palette li {
    flex: 1;
}
.color-picker {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}
hr {
    margin: 50px 0;
}
.sprites-bd {
    width: 480px;
    height: 475px;
    background-image: url(../src/3/erik_ce204002.jpg);
    background-position: center top;
}